<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":"
                    + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>"/>
    <meta name="viewport"
          content="width=device-width,inital-scale=1,user-scalable=no"/>
    <title>Home</title>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Bootstrap Core CSS -->
    <link href="resource/css/bootstrap.min.css" rel='stylesheet'
          type='text/css'/>
    <!-- Custom CSS -->
    <link href="resource/css/style.css" rel='stylesheet' type='text/css'/>
    <!-- Graph CSS -->
    <link href="resource/css/lines.css" rel='stylesheet' type='text/css'/>
    <link href="resource/css/font-awesome.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="resource/js/jquery.min.js"></script>
    <!----webfonts--->
    <link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900'
          rel='stylesheet' type='text/css'>
    <!---//webfonts--->
    <!-- Nav CSS -->
    <link href="resource/css/custom.css" rel="stylesheet">
    <script type="text/javascript" src="resource/js/sidebar.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="resource/js/metisMenu.min.js"></script>
    <script src="resource/js/custom.js"></script>
    <!-- Graph JavaScript -->
    <script src="resource/js/d3.v3.js"></script>
    <script src="resource/js/rickshaw.js"></script>
</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <jsp:include page="common/head.jsp"></jsp:include>
    <!-- /Navigation -->
    <div id="page-wrapper">
        <div class="graphs">
            <div class="col_3">
                <div class="col-md-3 widget widget1">
                    <div class="r3_counter_box">
                        <i class="pull-left fa fa-thumbs-up icon-rounded"></i>

                        <div class="stats">
                            <h5><strong>45%</strong></h5>
                            <span>New Orders</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 widget widget1">
                    <div class="r3_counter_box">
                        <i class="pull-left fa fa-users user1 icon-rounded"></i>

                        <div class="stats">
                            <h5><strong>1019</strong></h5>
                            <span>New Visitors</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 widget widget1">
                    <div class="r3_counter_box">
                        <i class="pull-left fa fa-comment user2 icon-rounded"></i>

                        <div class="stats">
                            <h5><strong>1012</strong></h5>
                            <span>New Users</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 widget">
                    <div class="r3_counter_box">
                        <i class="pull-left fa fa-dollar dollar1 icon-rounded"></i>

                        <div class="stats">
                            <h5><strong>$450</strong></h5>
                            <span>Profit Today</span>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col_1">
                <div class="col-md-4 span_7">
                    <div class="cal1 cal_2">
                        <div class="clndr">
                            <div class="clndr-controls">
                                <div class="clndr-control-button"><p
                                        class="clndr-previous-button">
                                    previous</p></div>
                                <div class="month">July 2015</div>
                                <div class="clndr-control-button rightalign"><p
                                        class="clndr-next-button">next</p></div>
                            </div>
                            <table class="clndr-table" border="0"
                                   cellspacing="0" cellpadding="0">
                                <thead>
                                <tr class="header-days">
                                    <td class="header-day">S</td>
                                    <td class="header-day">M</td>
                                    <td class="header-day">T</td>
                                    <td class="header-day">W</td>
                                    <td class="header-day">T</td>
                                    <td class="header-day">F</td>
                                    <td class="header-day">S</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="day adjacent-month last-month calendar-day-2015-06-28">
                                        <div class="day-contents">28</div>
                                    </td>
                                    <td class="day adjacent-month last-month calendar-day-2015-06-29">
                                        <div class="day-contents">29</div>
                                    </td>
                                    <td class="day adjacent-month last-month calendar-day-2015-06-30">
                                        <div class="day-contents">30</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-01">
                                        <div class="day-contents">1</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-02">
                                        <div class="day-contents">2</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-03">
                                        <div class="day-contents">3</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-04">
                                        <div class="day-contents">4</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="day calendar-day-2015-07-05">
                                        <div class="day-contents">5</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-06">
                                        <div class="day-contents">6</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-07">
                                        <div class="day-contents">7</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-08">
                                        <div class="day-contents">8</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-09">
                                        <div class="day-contents">9</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-10">
                                        <div class="day-contents">10</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-11">
                                        <div class="day-contents">11</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="day calendar-day-2015-07-12">
                                        <div class="day-contents">12</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-13">
                                        <div class="day-contents">13</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-14">
                                        <div class="day-contents">14</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-15">
                                        <div class="day-contents">15</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-16">
                                        <div class="day-contents">16</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-17">
                                        <div class="day-contents">17</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-18">
                                        <div class="day-contents">18</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="day calendar-day-2015-07-19">
                                        <div class="day-contents">19</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-20">
                                        <div class="day-contents">20</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-21">
                                        <div class="day-contents">21</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-22">
                                        <div class="day-contents">22</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-23">
                                        <div class="day-contents">23</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-24">
                                        <div class="day-contents">24</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-25">
                                        <div class="day-contents">25</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="day calendar-day-2015-07-26">
                                        <div class="day-contents">26</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-27">
                                        <div class="day-contents">27</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-28">
                                        <div class="day-contents">28</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-29">
                                        <div class="day-contents">29</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-30">
                                        <div class="day-contents">30</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-31">
                                        <div class="day-contents">31</div>
                                    </td>
                                    <td class="day adjacent-month next-month calendar-day-2015-08-01">
                                        <div class="day-contents">1</div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 span_8">
                    <div class="activity_box">
                        <div class="scrollbar" id="style-2">
                            <div class="activity-row">
                                <div class="col-xs-1"><i
                                        class="fa fa-thumbs-up text-info icon_13"> </i>
                                </div>
                                <div class="col-xs-3 activity-img"><img
                                        src='resource/images/5.png'
                                        class="img-responsive" alt=""/></div>
                                <div class="col-xs-8 activity-desc">
                                    <h5><a href="#">Lorem Ipsum</a> liked <a
                                            href="#">random</a></h5>

                                    <p>Lorem Ipsum is simply dummy</p>
                                    <h6>8:03</h6>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="activity-row">
                                <div class="col-xs-1"><i
                                        class="fa fa-comment text-info"></i>
                                </div>
                                <div class="col-xs-3 activity-img"><img
                                        src='resource/images/3.png'
                                        class="img-responsive" alt=""/></div>
                                <div class="col-xs-8 activity-desc">
                                    <h5><a href="#">simply random</a> liked <a
                                            href="#">passages</a></h5>

                                    <p>Lorem Ipsum is simply dummy</p>
                                    <h6>8:03</h6>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="activity-row">
                                <div class="col-xs-1"><i
                                        class="fa fa-check text-info icon_11"></i>
                                </div>
                                <div class="col-xs-3 activity-img"><img
                                        src='resource/images/1.png'
                                        class="img-responsive" alt=""/></div>
                                <div class="col-xs-8 activity-desc">
                                    <h5><a href="#">standard chunk</a> liked <a
                                            href="#">model</a></h5>

                                    <p>Lorem Ipsum is simply dummy</p>
                                    <h6>8:03</h6>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="activity-row1">
                                <div class="col-xs-1"><i
                                        class="fa fa-user text-info icon_12"></i>
                                </div>
                                <div class="col-xs-3 activity-img"><img
                                        src='resource/images/4.png'
                                        class="img-responsive" alt=""/></div>
                                <div class="col-xs-8 activity-desc">
                                    <h5><a href="#">perspiciatis</a> liked <a
                                            href="#">donating</a></h5>

                                    <p>Lorem Ipsum is simply dummy</p>
                                    <h6>8:03</h6>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 stats-info">
                    <div class="panel-heading">
                        <h4 class="panel-title">Browser Stats</h4>
                    </div>
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <li>Google Chrome
                                <div class="text-success pull-right">12%<i
                                        class="fa fa-level-up"></i></div>
                            </li>
                            <li>Firefox
                                <div class="text-success pull-right">15%<i
                                        class="fa fa-level-up"></i></div>
                            </li>
                            <li>Internet Explorer
                                <div class="text-success pull-right">18%<i
                                        class="fa fa-level-up"></i></div>
                            </li>
                            <li>Safari
                                <div class="text-danger pull-right">17%<i
                                        class="fa fa-level-down"></i></div>
                            </li>
                            <li>Opera
                                <div class="text-danger pull-right">10%<i
                                        class="fa fa-level-down"></i></div>
                            </li>
                            <li>Mobile &amp; tablet
                                <div class="text-success pull-right">14%<i
                                        class="fa fa-level-up"></i></div>
                            </li>
                            <li class="last">Others
                                <div class="text-success pull-right">5%<i
                                        class="fa fa-level-up"></i></div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="span_11">
                <div class="col-md-6 col_4">
                    <div class="map_container">
                        <div id="vmap"
                             style="width: 100%; height: 400px;"></div>
                    </div>
                    <!----Calender -------->
                    <link rel="stylesheet" href="resource/css/clndr.css"
                          type="text/css"/>
                    <script src="resource/js/underscore-min.js"
                            type="text/javascript"></script>
                    <script src="resource/js/moment-2.2.1.js"
                            type="text/javascript"></script>
                    <script src="resource/js/clndr.js"
                            type="text/javascript"></script>
                    <script src="resource/js/site.js"
                            type="text/javascript"></script>
                    <!----End Calender -------->
                </div>
                <div class="col-md-6 col_5">
                    <div id="chart_container">
                        <div id="chart"></div>
                        <div id="slider"></div>
                        <script>

                            var seriesData = [[], [], [], [], []];
                            var random = new Rickshaw.Fixtures.RandomData(50);

                            for (var i = 0; i < 75; i++) {
                                random.addData(seriesData);
                            }

                            var graph = new Rickshaw.Graph({
                                element: document.getElementById("chart"),
                                renderer: 'multi',

                                dotSize: 5,
                                series: [
                                    {
                                        name: 'temperature',
                                        data: seriesData.shift(),
                                        color: '#AFE9FF',
                                        renderer: 'stack'
                                    }, {
                                        name: 'heat index',
                                        data: seriesData.shift(),
                                        color: '#FFCAC0',
                                        renderer: 'stack'
                                    }, {
                                        name: 'dewpoint',
                                        data: seriesData.shift(),
                                        color: '#555',
                                        renderer: 'scatterplot'
                                    }, {
                                        name: 'pop',
                                        data: seriesData.shift().map(function (d) {
                                            return {x: d.x, y: d.y / 4}
                                        }),
                                        color: '#555',
                                        renderer: 'bar'
                                    }, {
                                        name: 'humidity',
                                        data: seriesData.shift().map(function (d) {
                                            return {x: d.x, y: d.y * 1.5}
                                        }),
                                        renderer: 'line',
                                        color: '#ef553a'
                                    }
                                ]
                            });


                            graph.render();

                            var detail = new Rickshaw.Graph.HoverDetail({
                                graph: graph
                            });
                        </script>
                    </div>
                    <!-- map -->
                    <link href="resource/css/jqvmap.css" rel='stylesheet'
                          type='text/css'/>
                    <script src="resource/js/jquery.vmap.js"></script>
                    <script src="resource/js/jquery.vmap.sampledata.js"
                            type="text/javascript"></script>
                    <script src="resource/js/jquery.vmap.world.js"
                            type="text/javascript"></script>
                    <script type="text/javascript">
                        jQuery(document).ready(function () {
                            jQuery('#vmap').vectorMap({
                                map: 'world_en',
                                backgroundColor: '#333333',
                                color: '#ffffff',
                                hoverOpacity: 0.7,
                                selectedColor: '#666666',
                                enableZoom: true,
                                showTooltip: true,
                                values: sample_data,
                                scaleColors: ['#C8EEFF', '#006491'],
                                normalizeFunction: 'polynomial'
                            });
                        });
                    </script>
                    <!-- //map -->
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="content_bottom">
                <div class="col-md-8 span_3">
                    <div class="bs-example1" data-example-id="contextual-table">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Column heading</th>
                                <th>Column heading</th>
                                <th>Column heading</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="active">
                                <th scope="row">1</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr class="success">
                                <th scope="row">3</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr class="info">
                                <th scope="row">5</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr>
                                <th scope="row">6</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr class="warning">
                                <th scope="row">7</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr>
                                <th scope="row">8</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            <tr class="danger">
                                <th scope="row">9</th>
                                <td>Column content</td>
                                <td>Column content</td>
                                <td>Column content</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-4 span_4">
                    <div class="col_2">
                        <div class="box_1">
                            <div class="col-md-6 col_1_of_2 span_1_of_2">
                                <a class="tiles_info">
                                    <div class="tiles-head red1">
                                        <div class="text-center">Orders</div>
                                    </div>
                                    <div class="tiles-body red">10</div>
                                </a>
                            </div>
                            <div class="col-md-6 col_1_of_2 span_1_of_2">
                                <a class="tiles_info tiles_blue">
                                    <div class="tiles-head tiles_blue1">
                                        <div class="text-center">Sales</div>
                                    </div>
                                    <div class="tiles-body blue1">30</div>
                                </a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="box_1">
                            <div class="col-md-6 col_1_of_2 span_1_of_2">
                                <a class="tiles_info">
                                    <div class="tiles-head fb1">
                                        <div class="text-center">Facebook</div>
                                    </div>
                                    <div class="tiles-body fb2">10</div>
                                </a>
                            </div>
                            <div class="col-md-6 col_1_of_2 span_1_of_2">
                                <a class="tiles_info tiles_blue">
                                    <div class="tiles-head tw1">
                                        <div class="text-center">Twitter</div>
                                    </div>
                                    <div class="tiles-body tw2">30</div>
                                </a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="cloud">
                        <div class="grid-date">
                            <div class="date">
                                <p class="date-in">New York</p>
                                <span class="date-on">°F °C </span>

                                <div class="clearfix"></div>
                            </div>
                            <h4>30°<i class="fa fa-cloud-upload"> </i></h4>
                        </div>
                        <p class="monday">Monday 10 July</p>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <jsp:include page="common/footer.jsp"></jsp:include>
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap Core JavaScript -->
<script src="resource/js/bootstrap.min.js"></script>
</body>
</html>
